<template>
  <div>
      <Header v-if="showHeader" title="费用报销"></Header>
			<van-sticky :offset-top="offsetTop">
					<FlexList :flexIconList="flexIconList" :columnNum="3"></FlexList>
			</van-sticky>
			<div class="user_info">
				<div class="user_info_base">
				    <img v-if="baseInfo.fd_sta_photo" class="user_pic" :src="baseInfo.fd_sta_photo" alt="个人头像">
				    <img v-else class="user_pic" :src="pic" alt="头像" />
				    <ul>
				        <li class="one-txt-cut uesr_name">{{baseInfo.fd_sta_name}}</li>
				        <li class="one-txt-cut">职位：{{baseInfo.fd_jobs_name}}</li>
				        <!-- <li class="one-txt-cut">电话：{{userInfo.fd_sta_mobile}}<a><img :src="telIcon" alt="手机号" @click="callPhone(userInfo.fd_sta_mobile)"></a></li> -->
				        <li class="one-txt-cut"><span>电话：{{baseInfo.fd_sta_mobile}}</span><a :href="'tel:'+ baseInfo.fd_sta_mobile"><img :src="telIcon" alt="手机号" @click="callPhone(baseInfo.fd_sta_mobile)"></a></li>
				    </ul>
				</div>
			</div>
			<div>
			    <UserInfo :fromPage="false" :userInfo="userInfo"></UserInfo>
			</div>
  </div>
</template>

<script>
import { statistics,profile } from "@/request/api.js";
import Header from "@/components/Header.vue";
import FlexList from "@/components/business/FlexList.vue";
import UserInfo  from "@/components/business/finUserInfo.vue";
export default {
  name:'Reimbursement',
  data(){
    return {
            showHeader:this.$store.state.showHeader,
            offsetTop:0,
            flexIconList:[
                {text:'我要申请',icon:require('@/assets/images/icon5.png'),url:'/finApplication'},
                {text:'我发起的',icon:require('@/assets/images/icon6.png'),url:'/finSponsored'},
                {text:'我审批的',icon:require('@/assets/images/icon7.png'),url:'/finAccraditation'}
            ],
						userInfo:{},
						fromPage:false,
						telIcon:require('@/assets/images/tel_icon.png'),
						pic:require('@/assets/images/morentouxiang.png'),
						baseInfo:{},
    }
  },
  components:{FlexList,Header,UserInfo},
	created(){
	    if (this.$route.query.staffer_id) {
	        let id = this.$route.query.staffer_id;
	        localStorage.setItem('staffer_id',id);
	        this.$store.commit('setStaffer_id',id);
	    }
	    if (this.$route.query.token) {
	        let token = this.$route.query.token;
	        localStorage.setItem('token',token);
	        this.$store.commit('setToken',token);
	    }
			if (this.$route.query.staffer_name) {
			    let staffer_name = this.$route.query.staffer_name;
					localStorage.setItem('staffer_name',staffer_name);
			    this.$store.commit('setStaffer_name',staffer_name);
			}
	},
	mounted(){
	    // console.log(this.$refs.collapse_list.offsetHeight)
	    // this.offsetHeight = -(this.$refs.collapse_list.offsetHeight - 300);
			statistics({token:this.$store.state.token}).then(res=>{
	        let list = res;
	        this.userInfo = list.data;
	        this.showLoading = false;
	    }).catch(error=>{
	        console.log(error)
	        this.showLoading = false;
	    });
			
			let staffer_id = this.$store.state.staffer_id;
			// 获取员工的基本资料
			profile({token:this.$store.state.token,fd_sta_id:staffer_id}).then(res=>{
			    let list = res;
			    this.baseInfo = list.data.staffer;
			}).catch(error=>{
			    console.log(error)
			});
	    
	},
	methods:{
		//调用原生的电话
		callPhone(phone){
				console.log(phone)
				this.$bridge.callhandler('takePhone', phone, responseCallback => {
						// 处理返回数据
						console.log('JS Echo called with:', phone);
						// responseCallback(phone);
						return false;
				})
		},
	    // onLoad() {
	    //     if(!this.timer){
	    //         this.timer = setTimeout(() => {
	    //             // 异步更新数据
	    //             staffersDetailLog({token:this.$store.state.token,id:this.$store.state.staffer_id,page:this.page,page_num:this.limit}).then(res=>{
	    //                 // console.log(res.data)
	    //                 this.page += 1;
	    //                 // console.log(this.page)
	    //                 let list = res.data.data;
	    //                 list.map(item=>{
	    //                     if (Number(item.app_open_time.real_target) >= Number(item.app_open_time.target)) {
	    //                         item.app_open_time.percentage = 100;
	    //                     }else if (Number(item.app_open_time.real_target)<Number(item.app_open_time.target)) {
	    //                         item.app_open_time.percentage = (Number(item.app_open_time.real_target)/Number(item.app_open_time.target)).toFixed(2)*100;
	    //                     }
	    //                     if (Number(item.reg_user.real_target)>=Number(item.reg_user.target)) {
	    //                         item.reg_user.percentage = 100;
	    //                     }else if (Number(item.reg_user.real_target) < Number(item.reg_user.target)) {
	    //                         item.reg_user.percentage = (Number(item.reg_user.real_target)/Number(item.reg_user.target)).toFixed(2)*100;
	    //                     }
	    //                     if (Number(item.tm_article_share.real_target) >= Number(item.tm_article_share.target)) {
	    //                         item.tm_article_share.percentage = 100;
	    //                     }else if (Number(item.tm_article_share.real_target)<Number(item.tm_article_share.target)) {
	    //                         item.tm_article_share.percentage = (Number(item.tm_article_share.real_target)/Number(item.tm_article_share.target)).toFixed(2)*100;
	    //                     }
	    //                     if (Number(item.five_day_money.real_target) >= Number(item.five_day_money.target)) {
	    //                         item.five_day_money.percentage = 100;
	    //                     }else if (Number(item.five_day_money.real_target) < Number(item.five_day_money.target)) {
	    //                         item.five_day_money.percentage = (Number(item.five_day_money.real_target)/Number(item.five_day_money.target)).toFixed(2)*100;
	    //                     }
	    //                     this.collapseList.push(item);
	    //                 })
	    //                 // 数据全部加载完成
	    //                 if (list.length < 5) {
	    //                     this.finished = true;
	    //                     return
	    //                 }
	    //             }).catch(error=>{
	    //                 console.log(error)
	    //                 this.showLoading = false;
	    //             })
	    //             this.timer = null;
	    //         }, 800)
	    //     }
	    // },
	},
}
</script>

<style lang="less" scoped>
.user_info{
    width: 100%;
    height: auto;
    padding: 10px 15px;
    box-sizing: border-box;
    background: #fff;
    margin: 5px auto;
    .user_info_base{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        overflow: hidden;
        img{
            display: block;
            width: 70px;
            height: 70px;
        }
        .user_pic{border-radius: 50%;}
        ul{
            height: auto;
            padding-left: 20px;
            box-sizing: border-box;
            overflow: hidden;
            flex: 3;
            li{
                width: 100%;
                line-height: 25px;
                font-size: 14px;
                color: #151617;
                a{
                    display: inline-block;
                    margin-left: 10px;
                    img{width: 15px;height: 15px;}
                }
            }
            .uesr_name{font-size: 15px;font-weight: bold;}
        }
    }
		.m-t-10 {
			margin-top: 10px;
		}
}
.info_title {
	padding: 10px 0;
	color: #151617;
	font-size: 14px;
	font-weight: bold;
}
.user_info_list{
		width: 100%;
		height: auto;
		// padding: 20px 0;
		box-sizing: border-box;
		font-size: 13px;
		li{
				width: 100%;
				display: flex;
				align-items: center;
				padding: 5px 0;
				box-sizing: border-box;
				span{margin-left: 30px;}
				.upload_images{
						display: inline-block;
						color: #151617;
						margin-left: 30px;
						flex: 3;
				}
				.upload_images img{width: 42px; display: block;float: left;margin-right: 10px;}
				.item_title{
						margin-left: 0;
						text-align: right;
						color: #999;
						width: 90px;
						font-size: 13px;
				}
				.item_info {
					width: calc(100% - 90px);
					height: auto;
					word-break:break-all;
				}
		}
}
</style>